<template>
  <section style="margin: 0 auto">
    <template>
      <el-form :inline="true" label-width="80px" style="width: 840px;margin-bottom: 10px">
        <el-form-item prop="date1">
          <el-date-picker type="date" placeholder="选择日期"format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="date" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <span style="height: 40px;line-height: 40px">至</span>
        <el-form-item prop="date1">
          <el-date-picker type="date" placeholder="选择日期"format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="date2" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query()">查询</el-button>
        </el-form-item>
      </el-form>
    </template>
    <p>糖果发放总量</p>
    <el-table border :data="users" style="width: 842px">
      <el-table-column prop="id" label="" width="100">
      </el-table-column>
      <el-table-column prop="id" label="日期" width="185">
      </el-table-column>
      <el-table-column prop="id" label="发放量" width="185">
      </el-table-column>
      <el-table-column prop="id" label="领取量" width="185">
      </el-table-column>
      <el-table-column prop="id" label="发放量-领取量" width="185">
      </el-table-column>
    </el-table>
    <p>每日持有糖果账户总量</p>
    <el-table border :data="users" style="width: 842px">
      <el-table-column prop="id" label="" width="280">
      </el-table-column>
      <el-table-column prop="id" label="日期" width="280">
      </el-table-column>
      <el-table-column prop="id" label="账户量" width="280">
      </el-table-column>
    </el-table>
    <p>每日新增糖果发放量</p>
    <el-table border :data="users" style="width: 842px">
      <el-table-column prop="id" label="日期" width="280">
      </el-table-column>
      <el-table-column prop="id" label="Android" width="280">
      </el-table-column>
      <el-table-column prop="id" label="ios" width="280">
      </el-table-column>
    </el-table>
    <p>每日新增持有糖果账户数量</p>
    <el-table border :data="users" style="width: 842px">
      <el-table-column prop="id" label="" width="100">
      </el-table-column>
      <el-table-column prop="id" label="日期" width="185">
      </el-table-column>
      <el-table-column prop="id" label="发放量" width="185">
      </el-table-column>
      <el-table-column prop="id" label="领取量" width="185">
      </el-table-column>
      <el-table-column prop="id" label="发放量-领取量" width="185">
      </el-table-column>
    </el-table>
    <p>每日平均每账户持有糖果数量</p>
    <el-table border :data="users" style="width: 842px">
      <el-table-column prop="id" label="" width="280">
      </el-table-column>
      <el-table-column prop="id" label="日期" width="280">
      </el-table-column>
      <el-table-column prop="id" label="每日新增持有糖果账户数量" width="280">
      </el-table-column>
    </el-table>
    <p>每日持有糖果数量大于平均值的账户占比</p>
    <el-table border :data="users" style="width: 842px">
      <el-table-column prop="id" label="" width="280">
      </el-table-column>
      <el-table-column prop="id" label="日期" width="280">
      </el-table-column>
      <el-table-column prop="id" label="每日持有糖果数量大于平均值的账户占比" width="280">
      </el-table-column>
    </el-table>
  </section>
</template>
<script>
  import moment from 'moment'
  export default {
    data() {
      return {
        date:"",
        date2: '',
        users: [],
      }
    },
    methods:{
      query(){
        let datetime =  moment(this.date).format("YYYY-MM-DD HH:mm:ss");
        alert(datetime)
      }
    }
  }
</script>
<style>
  p{
    text-align: left;
  }
  section{
    padding-left:77px;
  }
  .el-form--inline .el-form-item__label{
    margin-top: -16px;
  }
</style>
